<template>
  <div class="group">
    <div class="head">
      <van-icon name="arrow-left" />
      <li>团购</li>
      <span></span>
    </div>
    <div class="main">
      <dl v-for="v in groupList" :key="v.id">
        <dt @click="goDetail(v)"><img :src="v.img" alt="" /></dt>
        <dd>
          <li>{{ v.title }}</li>
          <li>{{ v.address }}</li>
          <li>
            <span>活动时间:{{ v.time }}</span>
            <span>已报名:{{ v.peopleNum }}人</span>
          </li>
          <li>
            <van-switch v-model="v.state" size="24px" />
            <p>
              <van-button type="primary" size="small">开团</van-button>
              <van-button type="default" size="small" @click="delGroup(v.id)"
                >删除</van-button
              >
            </p>
          </li>
        </dd>
      </dl>
    </div>
    <div
      class="addgroup"
      @click="
        () => {
          this.$router.push('/newgroup');
        }
      "
    >
      <van-icon name="plus" />
    </div>
  </div>
</template>

<script>
import axios from "../../util/axios";
// import {useRouter} from 'vue-router'
// let router = useRouter();
export default {
  data() {
    return {
      groupList: [],
    };
  },
  methods: {
    getGroupList() {
      axios.get("/teamBuy").then((res) => {
        console.log(res);
        res.data.map((v) => {
          if (v.state === "开启") {
            v.state = true;
          } else if (v.state === "关闭") {
            v.state = false;
          }
        });
        this.groupList = res.data;
      });
    },
    goDetail(v) {
      window.sessionStorage.setItem("obj", JSON.stringify(v));
      this.$router.push("/groupdetail");
    },
    delGroup(id) {
      axios.post("/deleteTeam", { id: id }).then((res) => {
        console.log(res);
        this.getGroupList();
      });
    },
  },
  created() {
    this.getGroupList();
  },
};
</script>

<style lang="scss" scoped>
.group {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.head {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: cornflowerblue;
  color: #fff;
  font-size: 18px;
}
.addgroup {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: cornflowerblue;
  color: #fff;
  line-height: 60px;
  text-align: center;
  position: absolute;
  bottom: 60px;
  right: 15px;
}
.main {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
  padding: 10px;
  dl {
    width: 100%;
    margin: 15px 0;
    dt {
      width: 100%;
      img {
        width: 100%;
        height: 200px;
      }
    }
    dd {
      width: 100%;
      li {
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
      }
      > :nth-child(1) {
        font-size: 18px;
        font-weight: 600;
      }
      > :nth-child(2) {
        font-size: 16px;
      }
      > :nth-child(3) {
        font-size: 16px;
        justify-content: space-between;
      }
      > :nth-child(4) {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        button {
          width: 55px;
          height: 25px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>